<template>
<t-image-viewer v-if="!store.isMobileType" v-model:visible="ImgVisible" :images="[urls + props.info.value]">
    </t-image-viewer>
    <van-image-preview :show-index="false" v-else v-model:show="ImgVisible" :images="[urls + props.info.value]">
    </van-image-preview>
  <div class="outline-parent">
    

    <img
      class="outline-parent-bg"
      :src="publicUrls + 'free/style1/Auxiliaryoutlinestyle3Bg.webp'"
      alt=""
    />
    <div class="outline border-hover-style">
      <div class="outline-title" v-html="textType(props.info.text)"></div>
      <div class="outline-content" :style="!props.info.subTitle && !props.info.remarks && { justifyContent: 'center' }">
        <div
          class="audio-content"
          :class="audioFlag && 'rotate'"
          v-if="props.info.audio && props.info.audio.url"
          @click="audioplay"
        >
          <i class="doorIcon">&#xe688;</i>
        </div>
        <audio
          v-if="props.info.audio && props.info.audio.url"
          :src="urls + props.info.audio.url"
          ref="audioRef"
        ></audio>

        <p class="outline-subTitle" v-if="props.info.subTitle">——{{ props.info.subTitle }}</p>
        <div
          class="cover-box"
          :class="(!props.info.remarks || !props.info.subTitle) && 'cover-height'"
          v-if="props.info.value || (props.info.video && props.info.video.url)"
        >
          <img
            class="outline-cover-bg"
            :src="publicUrls + 'free/style1/Auxiliaryoutlinestyle3CoverBg.webp'"
            alt=""
          />
          <div class="medium">
            <img
              v-if="!(props.info.video && props.info.video.url)"
              class="outline-cover"
              @click="ImgVisible = true"
              :src="urls + props.info.value + '?imageView2/3/w/898/h/460/format/webp'"
              alt=""
            />
            <!-- <video
              v-if="props.info.video && props.info.video.url"
              class="outline-cover"
              :src="urls + props.info.video.url"
              @click="videoplay"
              ref="videoRef"
            ></video> -->
            <Videoview :info="props.info"></Videoview>
          </div>
        </div>
        <TextMax
          v-if="props.domShow"
          :data="props.info.remarks"
          :title="props.info.text"
          :row="props.info.value || (props.info.video && props.info.video.url) ? 2 : 7"
        ></TextMax>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: 'style3',
});
</script>


<script setup lang="ts">
import { publicUrls, textType } from '@/utils/minxin';
import textMode from '../../../textMode/textMode.vue';
import { urls } from '@/utils/request/upload';
import { defineComponent, ref, watch } from 'vue';
import TextMax from '@/freeComponents/textMode/TextMax.vue';
import { useProjectStore } from '@/store';
import Videoview from '@/freeComponents/videoDialog/videoview.vue';
const store = useProjectStore();
const ImgVisible = ref(false);
const props = defineProps({
  info: {
    type: Object,
  },
  domShow: {
    type: Boolean,
  },
});

const audioRef = ref(null);
const videoRef = ref(null);
const isPlay = ref(true);
const audioFlag = ref(false);

const audioplay = () => {
  if (audioRef.value.paused) {
    audioRef.value.play();
    if (videoRef.value) {
      videoRef.value.pause();
    }

    isPlay.value = true;
    audioFlag.value = true;
  } else {
    audioRef.value.pause();
    audioFlag.value = false;
  }
};

watch(
  () => store.videoInfoShow,
  (val) => {
    if (val) {
      if (audioRef.value) {
        audioRef.value.pause();
        audioFlag.value = false;
      }
    }
  },
);
</script>

<style scoped lang="less">
.outline-parent {
  position: relative;
  -webkit-box-reflect: below 50% linear-gradient(transparent, rgba(0, 0, 0, 0.15));
}
.outline-parent-bg {
  width: 618px;
  height: 378px;
  margin-top: 105px;
}
.outline {
  position: absolute;
  top: 105px;
  left: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  width: 618px;
  height: 378px;
}
.outline-title {
  display: flex;
  align-items: center;
  width: 48px;
  height: 100%;
  margin-left: 30px;
  ::v-deep p {
    writing-mode: vertical-rl; /* 从右到左的竖向排列 */
    text-align: center;
    font-family: SourceHanSerifCN-Bold;
    font-size: 20px;
    line-height: 28px;
    max-height: 288px;
    color: rgba(254, 243, 223, 1);
  }
}
.outline-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 373px;
  height: 100%;
  margin-right: 24px;
  padding: 23px 0;
}
.outline-subTitle {
  width: 100%;
  text-align: center;
  font-family: SourceMedium;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  margin-bottom: 10px;
  color: rgba(50, 43, 37, 1);
}
.cover-height {
  height: 223px !important;
}
.cover-box {
  display: flex;
  justify-content: center;
  align-content: center;
  position: relative;
  width: 373px;
  height: 150px;
  margin-bottom: 10px;
}
.outline-cover-bg {
  position: absolute;
  top: 50%;
  left: 0;
  width: 373px;
  height: 150px;
  transform: translate(0, -50%);
}
.medium {
  width: 315px;
  height: 100%;
  position: relative;
  border-radius: 3px;
  z-index: 5;
  .outline-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: rgba(244, 205, 134, 0.2);
  }
}
.outline-remarks {
  width: 100%;
  :deep(.openText) {
    justify-content: center;
    color: rgba(85, 59, 42, 1);
    span {
      color: rgba(85, 59, 42, 1);
    }
  }
  :deep(.text p) {
    color: rgba(50, 43, 37, 1);
  }
  :deep(.omission) {
    color: rgba(50, 43, 37, 1);
  }
}
.audio-content {
  position: absolute;
  bottom: 15px;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1.6px solid rgba(85, 59, 42, 1);
  border-radius: 50%;
  .doorIcon {
    font-size: 20px;
    color: rgba(85, 59, 42, 1);
  }
}
.rotate {
  animation: rotate 4s linear infinite;
  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}
</style>
